function render(result){
    if(!result.success) return alert(result.msg)
    let str = ""   
    result.data.forEach(function(item,index){
        str += `<li>
            <label>
            <input type="checkbox" data-id="${item._id}" ${item.isDone ? "checked" : ""} />
            <span class="${item.isDone ? "actived" : ""}" >${item.todoName}</span>
            <input data-id="${item._id}" type="text" class="edit" placeholder="${item.todoName}" style="display:none"/>
            </label>
            <button data-id="${item._id}" class="btn btn-danger">删除</button>
            <button data-id="${item._id}" class="btn btn-danger btn-edit">编辑</button>
        </li>`
    })
    ul.innerHTML = str
    const isDoneNum = result.data.reduce((prev,curr)=> prev += curr.isDone ? 1:0 ,0)
    const totalNum = result.data.length
    isDoneNumEl.innerText = isDoneNum
    totalNumEl.innerText = totalNum

    checkAllInput.checked = isDoneNum === totalNum && totalNum !== 0
    deleteIsDoneButton.style.display = result.data.some((item)=> item.isDone)? "block" : "none"
}

const input = document.querySelector(".todo-header input")
const ul = document.querySelector(".todo-main")
const deleteIsDoneButton = document.querySelector(".todo-footer button")
const isDoneNumEl = document.querySelector(".isDoneNum")
const totalNumEl = document.querySelector(".totalNum")
const checkAllInput = document.querySelector(".todo-footer input")


;(async function (){
    try{
        const result = await fetch_getTodos()
        if(!result.data.length) return
        render(result)
    }catch(err){
        console.log("失败",err)
    }
})()


input.onkeydown = async function (e){
    try{
        if(e.key !== "Enter") return
        const todoName = input.value.trim() 
        if(!todoName) return
        const result = await fetch_addTodo(todoName)
        render(result)
        input.value = ""
    }catch(err){
        console.log("失败",err)
    }
}

ul.onchange = async function(e){
    try{
        const { id } = e.target.dataset
        const targetIsDone = e.target.checked
        const result = await fetch_updateTodo(id,targetIsDone)
        render(result)
    }catch(err){
        console.log("失败",err)
    }
}



ul.onclick = async function(e){
    if(e.target.className === "btn btn-danger"){
        try{
            const { id } = e.target.dataset
            const result = await fetch_deleteTodo(id)
            render(result)
        }catch(err){
            console.log("失败",err)
        }
    } else if(e.target.className === "btn btn-danger btn-edit"){
        const li = e.target.parentNode
        const editBox = li.firstElementChild.lastElementChild
        editBox.style.display = "block"
        editBox.focus()
        var prevName = editBox.placeholder

        editBox.onblur =  async function (e){
            try{
                const todoName = this.value.trim() 
                if(!todoName || todoName === prevName) return this.style.display = "none"
                const { id } = e.target.dataset
                const result = await fetch_updateTodoName(id,todoName)
                render(result)
                this.placeholder = todoName
                this.style.display = "none"
            }catch(err){
                console.log("失败",err)
            }
        }

        editBox.onkeydown = async function (e){
            if(e.key !== "Enter") return
            try{
                const todoName = this.value.trim() 
                if(!todoName || todoName === prevName) return this.style.display = "none"
                const { id } = e.target.dataset
                const result = await fetch_updateTodoName(id,todoName)
                render(result)
                this.placeholder = todoName
                this.style.display = "none"
            }catch(err){
                console.log("失败",err)
            }
        }
    } else{
        return
    }

}

deleteIsDoneButton.onclick = async function (){
    const result = await fetch_deleteTodos()
    render(result)
}

checkAllInput.onchange = async function (){
    const targetIsDone = this.checked
    const result = await fetch_updateTodos(targetIsDone)
    render(result)
}